<template>
    <div id = "os-data-model">
      <div class = "Time">
        <div class = "type"> Time :{{type}}
          <span class = "UTC"> UTC </span>
        </div>
        <div class = "currentTime"> {{currentTime}} </div>
        <div class = "currentDate"> {{currentDate}} </div>
      </div>
      <div class = "COG">
        <div class = "type"> COG :{{type}}</div>
        <div class = "COGValue"> {{COGValue}} </div>
      </div>
      <div class = "SOG">
        <div class = "type"> SOG :{{type}}</div>
        <div class = "SOGValue"> {{SOGValue}} </div>
      </div>
      <div class = "POSN">
        <div class = "type"> POSN :{{type}}</div>
        <div class = "lat"> {{latValue}} </div>
        <div class = "lon"> {{lonValue}} </div>
      </div>
    </div>
</template>

<script>
  import EchoTool from '../utils/echo-tool'
  import {echo} from '../utils/echo'

  export default {
    data () {
      return {
        type: 'GP'
      }
    },
    computed: {
      osWidth: function () {
        return 'width:' + '' + '475' + 'px'
      },
      currentTime: function () {
        let _date = new Date()

        _date.setTime(echo.time)
        let h = _date.getHours()
        let m = _date.getMinutes()
        let s = _date.getSeconds()
        return h + ':' + m + ':' + s
      },
      currentDate: function () {
        let _date = new Date()
        let y = _date.getFullYear()
        let m = _date.getMonth()
        let d = _date.getDate()
        return d + '/' + (m + 1) + '/' + y
      },
      COGValue: function () {
        let cog = echo.oship.cog
        if (cog === 0) {
          return '---.-°'
        } else {
          let ret
          cog >= 10 ? ret = cog.toFixed(1) + '°' : ret = '0' + cog.toFixed(1) + '°'
          return ret
        }
      },
      SOGValue: function () {
        let sog = echo.oship.sog
        if (sog === 0) {
          return '--.--kn'
        } else {
          let ret
          sog >= 10 ? ret = sog.toFixed(2) + 'kn' : ret = '0' + sog.toFixed(2) + 'kn'
          return ret
        }
      },
      latValue: function () {
        let lat = echo.oship.lat
        console.log('lat', lat)
        if (lat === 0) {
          return '--°--.----\'-'
        } else {
          let ret = EchoTool.getLatLonString(lat, 'lat')
          return ret
        }
      },
      lonValue: function () {
        let lon = echo.oship.lon
        if (lon === 0) {
          return '--°--.----\'-'
        } else {
          return EchoTool.getLatLonString(lon, 'lon')
        }
      }
    },
    props: {
      framWidth: {
        type: Number
      }
    }
  }
</script>

<style lang = "less">
  #os-data-model {
    height: 635px;
    width: 475px;
  }

  .Time {
    border: 1px solid grey;
    height: 158px;
  }

  .COG {
    border: 1px solid grey;
    height: 158px;
  }

  .SOG {
    border: 1px solid grey;
    height: 158px;
  }

  .POSN {
    border: 1px solid grey;
    height: 157px;
  }

  .type {
    text-align: left;
    text-indent: 10px;
    font-size: 24px;
  }

  .UTC {
    position: relative;
    left: 270px;
  }

  .currentTime {
    font-size: 50px;
    text-align: right;
  }

  .currentDate {
    font-size: 50px;
    text-align: right;
  }

  .COGValue {
    font-size: 70px;
    position: relative;
    top: 20px;
  }

  .SOGValue {
    font-size: 70px;
    position: relative;
    top: 20px;
  }

  .lat {
    font-size: 50px;
    text-align: right;
  }

  .lon {
    font-size: 50px;
    text-align: right;
  }
</style>
